<template>
  <div class="wp-page-table-container">
    <div class="wp-table">
      <el-table
        stripe
        :ref="refName"
        :data="list"
        v-loading="loading"
        :max-height="maxHeight"
        :row-key="rowKey"
        :highlight-current-row="highlightCurrentRow"
        @select="select"
        @select-all="selectAll"
        @current-change="handleSelectionChange"
        @selection-change="selectionChange"
        @sort-change="changeTableSort"
        @row-click="rowClick"
        :WP_RowKey="getRowKey">
        <slot />
      </el-table>
    </div>
    <div class="wp-pagination">
      <pagination
        ref="wp_pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
        :pageSize="pageSize"
        :pageSizes="pageSizes"
        :currentPage="currentPage"
        :totalRow="totalRow"
        :current-row-key="currentRowKey"
      />
    </div>
  </div>
</template>

<script>
import Pagination from './Pagination'
export default {
  components: { Pagination },
  props: {
    WP_TableId: {Type: String, default: '_page'},
    highlightCurrentRow: {Type: Boolean, default: false},
    WP_RowKey: [Function, String],
    WP_CurrentRowKey: [String, Number],
    WP_Loading: {
      type: Boolean,
      default: false
    },
    WP_List: {
      type: Array
    },
    WP_PageSize: {
      type: Number,
      default: 5
    },
    WP_CurrentPage: {
      type: Number,
      default: 1
    },
    WP_TotalRow: {
      type: Number,
      default: 0
    },
    WP_MaxHeight: {
      type: Number,
      default: 360
    },
    height: {
      type: [String, Number],
      default: () => {
        return '100%'
      }
    },
    WP_PageSizes: {
      type: Array,
      default: () => {
        return [5, 10]
      }
    }
  },
  watch: {
    WP_Loading (nVal, oVal) {
      this.loading = nVal
    },
    WP_List (nVal, oVal) {
      this.list = nVal
    },
    WP_TotalRow (nVal, oVal) {
      this.totalRow = nVal
    },
    WP_CurrentPage (nVal, oVal) {
      this.currentPage = nVal
    },
    WP_PageSize (nVal, oVal) {
      this.pageSize = nVal
    },
    WP_PageSizes (nVal, oVal) {
      this.pageSizes = nVal
    }
  },
  data () {
    return {
      refName: this.WP_TableId,
      loading: this.WP_Loading,
      list: this.WP_List || [],
      pageSize: this.WP_PageSize,
      pageSizes: this.WP_PageSizes,
      currentPage: this.WP_CurrentPage,
      totalRow: this.WP_TotalRow,
      maxHeight: this.WP_MaxHeight,
      currentRowKey: this.WP_CurrentRowKey,
      rowKey: this.WP_RowKey
    }
  },
  created () {},
  methods: {
    toggleRowSelection (row, selected) {
      this.$refs[`${this.refName}`].toggleRowSelection(row, selected)
    },
    getRowKey (row) {
      return row.productCode
    },
    getSelection () {
      const rows = this.$refs[`${this.refName}`].selection
      return rows
    },
    clearSelection (row) {
      this.$refs[`${this.refName}`].clearSelection()
    },
    rowClick (row, column, event) {
      this.$emit('rowClick', row, column, event)
    },
    setCurrentRow (row) {
      this.$refs[`${this.refName}`].setCurrentRow(row)
    },
    // pageSize 改变时会触发
    handleSizeChange (pageInfo) {
      console.log(`每页`, pageInfo)
      this.pageSize = pageInfo.pageSize
      this.$parent.pageList(pageInfo)
    },
    // currentPage 改变时会触发
    handleCurrentChange (pageInfo) {
      // console.log(`当前页:`, pageInfo)
      this.$parent.pageList(pageInfo)
    },
    // 用户点击上一页按钮改变当前页后触发
    handlePrevClick (val) {
      this.$emit('prev-click', val)
    },
    // 用户点击下一页按钮改变当前页后触发
    handleNextClick (val) {
      this.$emit('next-click', val)
    },
    changeTableSort (column) {
      console.log(column)
      let fieldName = column.prop
      let sortingType = column.order

      // 按照降序排序
      if (sortingType === 'descending') {
        this.list = this.list.sort((a, b) => b[fieldName] - a[fieldName])
      } else {
        this.list = this.list.sort((a, b) => a[fieldName] - b[fieldName])
      }
    },
    handleSelectionChange (row) {
      this.$emit('handleSelectionChange', row)
    },
    select (selection, row) {
      this.$emit('select', selection, row)
    },
    selectAll (selection) {
      this.$emit('select-all', selection)
    },
    selectionChange (selection) {
      this.$emit('selection-change', selection)
    }
  }
}
</script>
<style lang="scss" scoped>
.wp-pagination {
  text-align: right;
}
.el-table__body{
  width: 100%!important;
}
</style>
